<!--
 * @Author: your name
 * @Date: 2021-04-02 13:57:58
 * @LastEditTime: 2021-04-30 03:10:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /medicine-web/src/components/ImageView/index.vue
-->

<template>
  <div class="image-view-container">
    <img @click.stop="enlargePic" :src="url" alt="" style="width: 100%; height: 466px;">
    
    <div class="image-view-enlarge" v-if="closeView">
      <img id="image-view-enlarge__close" :src="require('@/assets/image/close.png')" alt="" @click.stop="closeViewLarge">
      <img id="image-view-enlarge__absolute" @mousewheel="mouseWheel" :src="url" alt="" draggable="false">
    </div>
    <div class="image-view-enlarge__modal" v-if="closeView"></div>
  </div>
</template>
<script>
export default {
  name: 'imageView',
  data () {
    return {
      element: null,
      scaleValue: 1,
      closeView: false,
      offsetX: 'calc(50% - 30vw)',
      offsetY: '20%'
    }
  },
  methods: {
    closeViewLarge () {
      this.closeView = false
    },
    enlargePic () {
      this.closeView = true
      this.$nextTick(() => {
        const box = document.getElementById('image-view-enlarge__absolute')
        const fa = document.getElementsByClassName('image-view-enlarge')[0]
        console.log('element', box)
        console.log('elementOutter', fa)
        box.onmousedown=(ev) => {
          var oEvent = ev; 
          // 浏览器有一些图片的默认事件,这里要阻止
          oEvent.preventDefault();
          var disX = oEvent.clientX - box.offsetLeft;
          var disY = oEvent.clientY - box.offsetTop;
          fa.onmousemove=(ev) => {
            oEvent = ev;
            oEvent.preventDefault();
            var x = oEvent.clientX -disX;
            var y = oEvent.clientY -disY;

            // 图形移动的边界判断
            x = x <= 0 ? 0 : x;
            x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
            this.offsetX = x
            y = y <= 0 ? 0 : y;
            y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
            this.offsetY = y
            box.style.left = x + 'px';
            box.style.top = y + 'px';
          }
          // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
          fa.onmouseleave = () => {
            fa.onmousemove=null;
            fa.onmouseup=null;
          }
          // 鼠标弹起后停止移动
          fa.onmouseup = () => {
            fa.onmousemove=null;
            fa.onmouseup=null;
          }
        }
      })
    },
    mouseWheel (e) {
      const element = document.getElementById('image-view-enlarge__absolute')
      let val
      if (e.wheelDelta) {
        val = e.wheelDelta
      } else if (e.detail) {
        val = e.detail
      }
      if (val > 0) { // 滚轮向前放大
        element.style = `transform: scale(${this.scaleValue += 0.1}); left: ${this.offsetX}px; top: ${this.offsetY}px;`
      } else { // 滚轮向后缩小
        if (this.scaleValue < 0.6) {
          this.scaleValue = 0.6
        }
        element.style = `transform: scale(${this.scaleValue -= 0.1}); left: ${this.offsetX}px; top: ${this.offsetY}px;`
      }
    }
  },
  mounted () {
  },
  props: {
    url: {
      type: String,
      default: require('@/assets/image/meeting_placeholder.png')
    }
  },
  beforeDestroy () {
    document.getElementById('image-view-enlarge__absolute').removeEventListener('onmousedown', () => {}, false)
    document.getElementsByClassName('image-view-enlarge')[0].removeEventListener('onmousemove', () => {}, false)
    document.getElementsByClassName('image-view-enlarge')[0].removeEventListener('onmouseleave', () => {}, false)
    document.getElementsByClassName('image-view-enlarge')[0].removeEventListener('onmouseup', () => {}, false)
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
.image-view-container {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 74px;
  font-weight: bold;
  @include flex-def;
  @include flex-zCenter;
  @include flex-cCenter;
  .image-view-enlarge {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1004;
    background-color: transparent;
    top: 0;
    left: 0;
    #image-view-enlarge__absolute {
      position: fixed;
      width: 60vw;
      top: 20%;
      left: calc(50% - 30vw);
    }
    #image-view-enlarge__close {
      position: absolute;
      right: 40px;
      top: 30px;
      z-index: 1006;
      cursor: pointer;
    }
  }
  .image-view-enlarge__modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1003;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
  }
}
</style>